<template>
  <el-card shadow="never">
    <template #header>
      <div class="m10">
        <span>{{ $t("form.embed.title") }}</span>
        <span class="desc-text ml10">{{ $t("form.embed.desc") }}</span>
      </div>
    </template>
    <div class="top-tabs">
      <div
        class="tab-item"
        v-for="tab in tabs"
        :key="tab.value"
        @click="activeTab = tab.value"
        :class="{ active: tab.value === activeTab }"
      >
        <div>
          <el-icon
            size="25"
            :color="tab.color"
          >
            <svg-icon :name="tab.icon" />
          </el-icon>
        </div>
        <div class="tab-label">
          {{ tab.label }}
        </div>
        <div class="tab-desc">
          {{ tab.desc }}
        </div>
      </div>
    </div>
    <Transition
      name="slide-fade"
      mode="out-in"
    >
      <div
        v-if="activeTab === 1"
        class="mt20"
      >
        <el-radio-group
          v-model="openMiniAppType"
          size="default"
        >
          <el-radio-button :value="1">全屏打开</el-radio-button>
          <el-radio-button :value="2">半屏打开</el-radio-button>
        </el-radio-group>
        <div
          v-if="openMiniAppType == 1"
          class="mt10"
        >
          采用微信提供的“导航 Navigator”的方案。查看教程 优势：全屏填答体验更好；缺点：有跳转小程序弹窗。
        </div>
        <div
          v-if="openMiniAppType == 2"
          class="mt10"
        >
          采用微信提供的“打开半屏小程序”方案。 优势：没有二次确认弹窗；缺点：不支持横屏。
        </div>
        <el-input
          class="mt20"
          :value="getWechatMiniAppCode"
          readonly
          :autosize="{ minRows: 4, maxRows: 8 }"
          type="textarea"
        ></el-input>
        <el-button
          size="default"
          class="mt20"
          type="primary"
          v-copyText="getWechatMiniAppCode"
        >
          复制代码
        </el-button>
      </div>
      <div
        v-else-if="activeTab === 2"
        class="mt20"
      >
        <el-form label-position="top">
          <el-form-item label="公众号跳转网页">
            <el-input
              v-model="linkUrl"
              size="default"
            >
              <template #append>
                <el-icon class="mr2">
                  <ele-DocumentCopy />
                </el-icon>
                <el-button v-copyText="linkUrl">复制</el-button>
              </template>
            </el-input>
            <div class="sub-tips">复制答题链接后，粘贴至自定义菜单或图文中即可，若提示失败，则需使用小程序</div>
          </el-form-item>
          <el-form-item label="公众号跳转小程序">
            <el-input
              :value="wxMaEnvConfig!.appid"
              size="default"
            >
              <template #prepend>AppId</template>
              <template #append>
                <el-icon class="mr2">
                  <ele-DocumentCopy />
                </el-icon>
                <el-button v-copyText="wxMaEnvConfig!.appid">复制</el-button>
              </template>
            </el-input>
            <el-input
              v-model="linkUrl"
              size="default"
              class="mt10"
              :value="miniAppPath"
            >
              <template #prepend>Path</template>
              <template #append>
                <el-icon class="mr2">
                  <ele-DocumentCopy />
                </el-icon>
                <el-button v-copyText="miniAppPath">复制</el-button>
              </template>
            </el-input>
            <div class="sub-tips">可以将小程序答题页嵌入到自定义菜单和图文中</div>
          </el-form-item>
        </el-form>
      </div>
      <div
        v-else-if="activeTab === 3"
        class="mt20"
      >
        <el-form
          v-model="embedConfig"
          size="default"
          label-position="top"
        >
          <el-form-item label="入口文字">
            <el-input
              v-model="embedConfig.title"
              size="default"
            />
          </el-form-item>
          <el-form-item label="文字颜色">
            <el-color-picker
              v-model="embedConfig.titleColor"
              size="default"
            />
          </el-form-item>
          <el-form-item label="入口颜色">
            <el-color-picker
              v-model="embedConfig.bgColor"
              size="default"
            />
          </el-form-item>
          <el-form-item label="入口位置">
            <el-radio-group v-model="embedConfig.direction">
              <el-radio value="left">
                居左
                <el-input-number
                  v-model="embedConfig.left"
                  size="default"
                  :controls="false"
                  :min="0"
                  :max="100"
                />
                %
              </el-radio>
              <el-radio value="right">
                居右
                <el-input-number
                  v-model="embedConfig.right"
                  :controls="false"
                  size="default"
                  :min="0"
                  :max="100"
                />
                %
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-input
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            readonly
            :value="htmlEmbedCode"
          ></el-input>
          <el-form-item class="mt20">
            <el-button
              type="primary"
              v-copyText="htmlEmbedCode"
            >
              复制代码
            </el-button>
          </el-form-item>
        </el-form>
        <div class="page-wrap">
          <img :src="Feishu" />
          <div
            class="wenjuan-layer"
            :style="{
              background: embedConfig.bgColor,
              left: embedConfig.direction === 'left' ? `0` : ``,
              right: embedConfig.direction === 'right' ? `0` : ``,
              bottom:
                embedConfig.direction === 'left' ? `calc(${embedConfig.left}% - 76px)` : `calc(${embedConfig.right}% - 76px)`
            }"
          >
            <span
              style="text-decoration: none"
              :style="{
                color: embedConfig.titleColor
              }"
            >
              {{ embedConfig.title }}
            </span>
          </div>
          <!-- Wenjuan Layer End -->
        </div>
        <el-divider />
        <div>
          <div class="title">网页中直接显示</div>
          <span class="sub-tips">自适应高度，单个网页请勿粘贴多个（Safari 不支持 iframe 嵌入使用)</span>
        </div>
        <el-input
          :autosize="{ minRows: 2, maxRows: 4 }"
          type="textarea"
          :value="iframeEmbedCode"
          readonly
        ></el-input>
        <el-form
          size="default"
          class="mt20"
        >
          <el-form-item label="展示宽高">
            <el-radio-group v-model="iframeConfig!.widthType">
              <el-radio value="auto">自适应</el-radio>
              <el-radio value="fixed">固定</el-radio>
            </el-radio-group>
            <span class="ml10">高度</span>
            <el-input-number
              class="ml10"
              v-model="iframeConfig.width"
              :controls="false"
              size="default"
              :min="0"
            />
            <span class="ml10">宽度</span>
            <el-input-number
              class="ml10"
              v-model="iframeConfig.height"
              :controls="false"
              size="default"
              :min="0"
            />
          </el-form-item>
          <el-form-item class="mt20">
            <el-button
              type="primary"
              v-copyText="iframeEmbedCode"
            >
              复制代码
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </Transition>
  </el-card>
</template>

<script setup lang="ts" name="FormEmbed">
import { computed, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import SvgIcon from "@/views/formgen/components/SvgIcon/index.vue";
import { getEnvConfig, getWxMiniAppId } from "@/api/system/config";
import { getBaseUrlPath } from "@/utils/auth";
import Feishu from "@/assets/images/feishu.png";

const tabs = ref([
  {
    label: "嵌入自有小程序",
    value: 1,
    icon: "wechat-miniprogram-fill",
    color: "#00B240",
    desc: "在自有小程序中打开问卷"
  },
  {
    label: "嵌入微信公众号",
    value: 2,
    icon: "wechat-logo-fill",
    color: "#00B240",
    desc: "嵌入自定义菜单或文章中"
  },
  {
    label: "嵌入网页",
    value: 3,
    icon: "icon-park-outline--source-code",
    color: "#00B240",
    desc: "网页中直接展示问卷"
  }
]);

const activeTab = ref(1);

const openMiniAppType = ref(1);

const embedConfig = ref({
  title: "问卷调查",
  titleColor: "#FFFFFF",
  bgColor: "#26B941",
  // 方向
  direction: "left",
  left: 50,
  right: 0
});

const htmlEmbedCode = computed(() => {
  const position =
    embedConfig.value.direction === "left"
      ? `left:0;bottom:${embedConfig.value.left}%`
      : `right:0;right:${embedConfig.value.right}%`;
  return `<!--  Layer Begin -->
      <div id="idy_floatdiv" style="position:fixed;${position};width:24px;height:76px;background:#00BF6F;
      line-height: 24px;writing-mode:vertical-rl;text-align:center;font-family:PingFangSC-Regular;font-size:12px;">
          <a href="${linkUrl.value}" target="blank" style="color:#ffffff;text-decoration:none;">问卷调查</a>
      </div>
      <!--  Layer End -->
  `;
});

const iframeConfig = ref({
  width: 1200,
  height: 800,
  // 宽高类型 自适应还是固定
  widthType: "auto"
});

const iframeEmbedCode = computed(() => {
  if (iframeConfig.value.widthType === "auto") {
    return `<iframe id='idy_frame' height="100%" width="100%" src="${linkUrl.value}" frameborder="0"
        style='min-height:650px' allowfullscreen sandbox="allow-same-origin allow-scripts allow-modals allow-downloads allow-forms allow-popups"></iframe>`;
  } else {
    return `<iframe id='idy_frame' height="${iframeConfig.value.height}" width="${iframeConfig.value.width}" src="${linkUrl.value}"  frameborder="0"
          allowfullscreen sandbox="allow-same-origin allow-scripts allow-modals allow-downloads allow-forms allow-popups"></iframe>`;
  }
});

const wxMaEnvConfig = ref<{
  appid: string;
}>({
  appid: ""
});

onMounted(async () => {
  const res = await getWxMiniAppId();
  if (res.data) {
    wxMaEnvConfig.value.appid = res.data;
  }
});

const route = useRoute();

const formKey = ref(route.query.key);

const linkUrl = ref(getBaseUrlPath() + `/s/${formKey.value}`);

const miniAppPath = ref(`pages/form/write/index?formKey=${formKey.value}&navigateBackMiniProgram=true`);

const getWechatMiniAppCode = computed(() => {
  if (!wxMaEnvConfig.value.appid) {
    return "暂未配置小程序环境，请先配置小程序环境";
  }
  if (openMiniAppType.value === 1) {
    return `wx.navigateToMiniProgram({
     appId: '${wxMaEnvConfig.value?.appid}',
     path: '${miniAppPath.value}'
   });`;
  } else {
    return `wx.openEmbeddedMiniProgram({
        appId: '${wxMaEnvConfig.value?.appid}',
        path: '${miniAppPath.value}'
    });`;
  }
});
</script>
<style lang="scss" scoped>
.title {
  height: 24px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #333;
  margin-top: 24px;
  display: inline-block;
}
.sub-tips {
  height: 18px;
  font-size: 12px;
  line-height: 18px;
  color: var(--el-text-color-placeholder);
  margin-top: 16px;
}
.title-label {
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

.top-tabs {
  margin-top: 20px;
  display: flex;

  .tab-item {
    align-items: center;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 4px;
    margin-right: 10px;
    background-color: #f5f7fa;

    &:hover {
      background-color: #e9ecf0;
    }

    &.active {
      background-color: var(--el-color-primary-light-9);
    }

    .tab-label {
      font-size: 14px;
      font-weight: 500;
      color: var(--el-text-color-primary);
      margin-top: 10px;
    }

    .tab-desc {
      font-size: 12px;
      color: var(--el-text-color-placeholder);
      margin-top: 4px;
    }
  }
}
.page-wrap {
  position: relative;

  img {
    width: 100%;
    height: 100%;
  }
  .wenjuan-layer {
    position: absolute;
    width: 24px;
    height: 76px;
    line-height: 24px;
    writing-mode: vertical-rl;
    text-align: center;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    // 超出文字省略
    overflow: hidden;
  }
}
</style>
